<!--
 * @Descripttion:
 * @version:
 * @Author: Connor
 * @Date: 2021-03-12 16:04:54
 * @LastEditors: Sam
 * @LastEditTime: 2021-03-16 16:31:40
-->
<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>业绩曲线图</span>
      </div>

      <el-form v-model="searchForm" size="mini" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item prop="shippingWay">
              <div slot="label">渠道类型：</div>
              <el-select
                v-model="searchForm.shippingWay"
                filterable
                placeholder="默认选择全部"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.channelWayMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="rangeInStockMonth">
              <div slot="label">入库时间：</div>
              <el-date-picker
                v-model="searchForm.rangeInStockMonth"
                type="monthrange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                format="yyyy-MM"
                value-format="yyyy-MM"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="saleIds">
              <div slot="label">销售：</div>
              <el-select
                v-model="searchForm.saleIds"
                multiple
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.saleNameMap"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                />
              </el-select>
              <el-tag
                type="info"
                size="mini"
                v-for="(item, value) in salePerformanceVo.saleGroupMap"
                :key="value"
                :label="item"
                style="margin-right:10px"
                @click="selectSaleGroup(value)"
                >{{ item }}</el-tag
              >
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-button size="mini" type="primary" @click="statistics"
              >统计</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <line-chart
        v-if="chartData.xTitle"
        :chart-data="chartData"
        :titleInfo="titleInfo"
        :chartList="chartList"
      />
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import LineChart from "./components/LineChart";
import { getPickerQuickOptions } from "@/utils/date-picker.js";
export default {
  props: ["data"],
  components: {
    LineChart
  },
  data() {
    return {
      loading: false,
      salePerformanceVo: {
        channelWayMap: null,
        instockChannelMap: null,
        saleNameMap: null,
        saleGroupMap: null,
        allSaleDepartAndUsers: null,
        userNameMap: null
      },
      searchForm: {
        shippingWay: null,
        rangeInStockMonth: null,
        saleIds: null,
        allSaleIds: null
      },
      pickerOptions: getPickerQuickOptions(),
      titleInfo: {
        text: "业绩曲线图",
        subtext: ``,
        legend: []
      },
      chartList: [
        // { prop: "receiveList", label: "应收" },
        // { prop: "payList", label: "应付" },
        // { prop: "profitList", label: "利润" }
      ],
      chartData: {}
    };
  },
  mounted() {
    this.init();
    // this.titleInfo.subtext = `总应收：${this.chartData.totalReceive}RMB，总应付：${this.chartData.totalPay}RMB，总利润：${this.chartData.totalProfit}RMB`;
  },
  methods: {
    async init() {
      this.salePerformanceVo = await ajax("initSalePerformanceVo", {});
      this.searchForm.rangeInStockMonth = [
        this.salePerformanceVo.startDate,
        this.salePerformanceVo.endDate
      ];
      this.searchForm.allSaleIds = this.salePerformanceVo.allSaleIds;
    },
    selectSaleGroup(saleGroupId) {
      const userIds = this.salePerformanceVo.allSaleDepartAndUsers[saleGroupId];
      if (userIds) {
        const selectSaleMapMap = {};
        const selectUserIds = new Array();
        for (let val of userIds) {
          let name = this.salePerformanceVo.userNameMap[val];
          selectSaleMapMap[val] = name;
          selectUserIds.push(val);
        }
        this.salePerformanceVo.saleNameMap = selectSaleMapMap;
        this.searchForm.saleIds = selectUserIds;
      }
    },
    statistics() {
      this.countSaleProfitChart();
      // let startDate = new Date(this.searchForm.rangeInStockMonth[0]);
      // let startYear = startDate.getFullYear();
      // let startMonth = startDate.getMonth() + 1;

      // let endDate = new Date(this.searchForm.rangeInStockMonth[1]);
      // let endYear = endDate.getFullYear();
      // let endMonth = endDate.getMonth() + 1;

      // if (endMonth - startMonth < 3 && endYear - startYear === 0) {
      //   this.countSaleProfitChart();
      // } else if (
      //   (startMonth === 11 || startMonth === 12) &&
      //   startMonth - endMonth === 10
      // ) {
      //   this.countSaleProfitChart();
      // } else {
      //   this.$message.error("只能查询三个月内的数据");
      // }
    },
    async countSaleProfitChart() {
      this.loading = true;
      const data = await ajax(
        "countWaybillReceiveTotalByMonth",
        this.searchForm
      );
      if (data.code == 200) {
        // this.chartData = data.data;
        this.titleInfo.subtext = `总业绩：${data.data.totalMoney}RMB`;
        const legend = new Array();
        const chartList = new Array();
        var chartData = {};
        chartData["xTitle"] = data.data.xTitle;
        for (let val in data.data.xDate) {
          legend.push(val);
          const row = { prop: val, label: val };
          chartList.push(row);
          chartData[val] = data.data.xDate[val];
        }
        this.titleInfo.legend = legend;
        this.chartList = chartList;
        this.chartData = chartData;
      } else {
        this.$message.error(data.message);
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
/deep/ .el-select {
  width: 100%;
}
</style>
